@keyframes spinsun {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes shadow {
  0% {
    background-position: 130% 0%;
  }
  33% {
    background-position: 50% 0%;
  }
  55% {
    background-position: 0% 0%;
  }
  80% {
    background-position: -50% 0%;
  }
  100% {
    background-position: -50% 0%;
  }
}

@keyframes orbitmercury {
  0% {
    z-index: 2;
    transform: rotateY(0);
  }
  49% {
    z-index: 2;
  }
  50% {
    z-index: -2;
  }
  99% {
    z-index: -2;
  }
  100% {
    z-index: 2;
    transform: rotateY(360deg);
  }
}

@keyframes orbitvenus {
  0% {
    z-index: 3;
    transform: rotateY(0);
  }
  49% {
    z-index: 3;
  }
  50% {
    z-index: -3;
  }
  99% {
    z-index: -3;
  }
  100% {
    z-index: 3;
    transform: rotateY(360deg);
  }
}

@keyframes orbitearth {
  0% {
    z-index: 4;
    transform: rotateY(0);
  }
  49% {
    z-index: 4;
  }
  50% {
    z-index: -4;
  }
  99% {
    z-index: -4;
  }
  100% {
    z-index: 4;
    transform: rotateY(360deg);
  }
}

@keyframes orbitmars {
  0% {
    z-index: 5;
    transform: rotateY(0);
  }
  49% {
    z-index: 5;
  }
  50% {
    z-index: -5;
  }
  99% {
    z-index: -5;
  }
  100% {
    z-index: 5;
    transform: rotateY(360deg);
  }
}

@keyframes orbitjupiter {
  0% {
    z-index: 6;
    transform: rotateY(0deg);
  }
  49% {
    z-index: 6;
  }
  50% {
    z-index: -6;
  }
  99% {
    z-index: -6;
  }
  100% {
    z-index: 6;
    transform: rotateY(360deg);
  }
}

@keyframes orbitsaturn {
  0% {
    z-index: 7;
    transform: rotateY(0deg);
  }
  49% {
    z-index: 7;
  }
  50% {
    z-index: -7;
  }
  99% {
    z-index: -7;
  }
  100% {
    z-index: 7;
    transform: rotateY(360deg);
  }
}

@keyframes orbituranus {
  0% {
    z-index: 8;
    transform: rotateY(0deg);
  }
  49% {
    z-index: 8;
  }
  50% {
    z-index: -8;
  }
  99% {
    z-index: -8;
  }
  100% {
    z-index: 8;
    transform: rotateY(360deg);
  }
}

@keyframes orbitneptune {
  0% {
    z-index: 9;
    transform: rotateY(0deg);
  }
  49% {
    z-index: 9;
  }
  50% {
    z-index: -9;
  }
  99% {
    z-index: -9;
  }
  100% {
    z-index: 9;
    transform: rotateY(360deg);
  }
}


/* Keep planet image flat */
@keyframes anti-spin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(-360deg);
  }
}

@keyframes anti-spin-rings {
  from {
    transform: rotateY(0) rotateX(73deg);
  }
  to {
    transform: rotateY(-360deg) rotateX(73deg);
  }
}


/* scene wrapper */
#site-info {
  /* 比 星体的高 */
  z-index: 3;
}

.banner-orbit {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center 0;
  background-color: black;
  padding-right: 60px;
  //background-color: #333333;

  > .wrapper {
    position: relative;
    margin: 200px auto 0 auto;
    display: block;
    width: inherit;
    perspective: 1000px;
    perspective-origin: 60% 50%;
    transform: rotate(-12deg);

    > div {
      margin: 0 auto;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d; /* Safari and Chrome */
      height: 0px;
    }

    .planet {
      background-size: cover;
      background-repeat: no-repeat;
      background-color: transparent;
      animation-iteration-count: infinite;
      overflow: hidden;
    }

    .shadow {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      background: transparent url(../img/archives/shadow.png) 0% 0% no-repeat;
      background-size: cover;
      border-radius: 100%;
    }

    .sun {
      position: relative;
      width: 250px;
      top: 0px;
      z-index: 1;
      height: 125px !important;

      .star {
        width: 250px;
        height: 250px;
        background: url(../img/archives/sun.png) no-repeat;
        background-size: cover;
        border-radius: 250px;
        margin: 0 auto;
        animation: spinsun 120s infinite linear;
      }
    }

    .mercury {
      position: relative;
      width: 400px;
      z-index: 2;
      animation: orbitmercury 12s infinite linear;
      top: -7.5px; /*half of planets height to keep orbits in line*/

      .planet {
        width: 15px;
        height: 15px;
        background-image: url(../img/archives/mercury.png);
        animation: anti-spin 12s infinite linear;
      }

      .shadow {
        animation: shadow 12s infinite linear;
      }
    }

    .venus {
      position: relative;
      width: 506px;
      z-index: 3;
      animation: orbitvenus 15s infinite linear;
      top: -19px;

      .planet {
        width: 38px;
        height: 38px;
        background-image: url(../img/archives/venus.png);
        animation: anti-spin 15s infinite linear;
      }

      .shadow {
        animation: shadow 15s infinite linear;
      }
    }

    .earth {
      position: relative;
      width: 610px;
      z-index: 4;
      animation: orbitearth 20s infinite linear;
      top: -20px;

      .planet {
        width: 40px;
        height: 40px;
        background-image: url(../img/archives/earth.png);
        animation: anti-spin 20s infinite linear;
      }

      .shadow {
        animation: shadow 20s infinite linear;
      }

    }

    .mars {
      position: relative;
      width: 706px;
      z-index: 5;
      animation: orbitmars 30s infinite linear;
      top: -11px;

      .planet {
        width: 22px;
        height: 22px;
        background-image: url(../img/archives/mars.png);
        animation: anti-spin 30s infinite linear;
      }

      .shadow {
        animation: shadow 30s infinite linear;
      }
    }

    .jupiter {
      position: relative;
      width: 1000px;
      z-index: 6;
      animation: orbitjupiter 50s infinite linear;
      top: -64px;

      .planet {
        width: 128px;
        height: 128px;
        background-image: url(../img/archives/jupiter.png);
        animation: anti-spin 50s infinite linear;
      }

      .shadow {
        animation: shadow 50s infinite linear;
      }
    }


    .saturn {
      position: relative;
      width: 1200px;
      z-index: 7;
      animation: orbitsaturn 60s infinite linear;
      top: -28px;

      .planet {
        width: 128px;
        height: 56px;
        background-image: url(../img/archives/saturn.png);
        background-position: center center;
        background-size: cover;
        animation: anti-spin 60s infinite linear;
      }

      .shadow {
        animation: shadow 60s infinite linear;
        left: 34px;
        top: 0px;
        width: 58px;
        height: 54px;
      }
    }

    .uranus {
      position: relative;
      width: 1400px;
      z-index: 8;
      animation: orbitsaturn 70s infinite linear;
      top: -20px;

      .planet {
        width: 40px;
        height: 40px;
        background-image: url(../img/archives/uranus.png);
        background-position: center center;
        background-size: cover;
        animation: anti-spin 70s infinite linear;
      }

      .shadow {
        animation: shadow 70s infinite linear;
      }
    }

    .neptune {
      position: relative;
      width: 1600px;
      z-index: 9;
      animation: orbitsaturn 80s infinite linear;
      top: -28px;

      .planet {
        width: 56px;
        height: 56px;
        background-image: url(../img/archives/neptune.png);
        background-position: center center;
        background-size: cover;
        animation: anti-spin 80s infinite linear;
      }

      .shadow {
        animation: shadow 80s infinite linear;
      }
    }

  }
}

.orbit-name {

  .planet:after {
    display: block;
    transform: rotate(12deg);
    color: white;
    font-size: 20px;
    font-family: cursive;
  }

  .mercury .planet:after {
    content: '水';
    padding-left: 1px;
    padding-top: 0px;
    font-size: 8px;
  }

  .venus .planet:after {
    content: '金';
    padding-left: 8px;
    padding-top: 6px;
  }

  .mars .planet:after {
    content: '火';
    padding-left: 5px;
    padding-top: 2px;
    font-size: 10px;
  }

  .earth .planet:after {
    content: '地球';
    padding-left: 9px;
    padding-top: 16px;
    font-size: 10px;
  }

  .jupiter .planet:after {
    content: '木';
    padding-left: 56px;
    padding-top: 82px;
  }

  .saturn .planet:after {
    content: '土';
    padding-left: 55px;
    padding-top: 18px;
  }

  .uranus .planet:after {
    content: '天王星';
    padding-left: 0;
    padding-top: 10px;
    font-size: 10px;
  }

  .neptune .planet:after {
    content: '海王星';
    padding-left: 11px;
    padding-top: 24px;
    font-size: 12px;
  }
}
